<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <com1></com1>

        <com1>
             <h2>京东超市</h2>
            <h2>这个一个牛逼的插槽组件1</h2>
        </com1>

        <com1>
          <div>  {{Toast()}}</div>
          <h2>京东商城</h2>
            <h2>这个一个牛逼的插槽组件2</h2>
        </com1>
    </div>
    <script src="./vue.js"></script>
    <script>

    var com1={
     data() {
         return {
             msg:'com1'
         }
     },
     template:`
      <div>  
           <h2>{{msg}}</h2>
      
            <slot></slot>
            
        
        
      </div>
     
     
     `
    }

    var  com2={

    }


        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'vue'
            },
        components:{
            com1
        },
            methods: {
                Toast() {
                    alert(1)
                     return '牛掰'
                }
            },


        });
    </script>
</body>

</html>